<template>
  <div class="section-wrap">
    <!-- 头部 -->
    <div class="headerBox">
    <div class="header">
      <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>考核量化考核记录
      <div class="auditBtn" @click="checkRecord(false)">保存</div>
      <div class="auditBtn" @click="checkRecord(true)">考核</div>
    </div>
    </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被考核单位</label>
        </div>
        <div class="input_div">
          <input type="text" readonly
                 v-model="detailinfo.beDepartName">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>单位负责人</label>
        </div>
        <div class="input_div">
          <input type="text" readonly
                 v-model="detailinfo.charge">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>考核表类型</label>
        </div>
        <div class="input_div">
          <input type="text" readonly :value="detailinfo.classifyOneName">
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>考核表名称</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="detailinfo.classifyTwoName" readonly>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>量化考核时间</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="detailinfo.checkDate.substr(0,10)" readonly>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>考核组长</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="detailinfo.checkGroupLeaderName" readonly>
        </div>
      </div>
      <div class="info_div3">
        <p>考核分工<span>（{{detailinfo.divisionList.length}}组）</span></p>
        <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
      </div>
      <div class="member_div">
        <ul class="member_list">
          <li v-for="(name,index) in detailinfo.divisionList" :key="index" @click="selectDivision(index)">
            <div class="form-item form-item-style1">
              <div class="label-title">
                <label>成员：</label>
              </div>
              <div class="input_div">
                <input type="text" class="member1"
                       :value="name.divisionProsonName" readonly>
              </div>
              <div v-if="name.status==0" style="color:red;">
                未提交
              </div>
              <div v-else>
                已提交
              </div>
            </div>
            <div class="form-item form-item-style1" style="border-bottom: none;">
              <div class="label-title">
                <label>分工（考核项）：</label>
              </div>
              <div class="input_div">
                <input type="text"
                       placeholder="请选择"
                       :value="name.standardNameList" readonly>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div v-if="$store.state.userid">
        <div class="notice_div" v-if="$store.state.userid==detailinfo.checkGroupLeaderId&&isallstatus">
          <div class="notice_top">
            <p>通知单</p>
            <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
          </div>
          <ul class="notice_list">
            <li @click="$router.push({path:'./problemItem', query: {id: $route.query.id, classId: $route.query.classId}})">
              <label>问题项</label>
              <div class="notice_item">
                <span class="notice_number">{{detailinfo.questioncount}}</span>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </li>
            <li @click="$router.push({path:'./reasonableGap',query:{id:$route.query.id,classId:$route.query.classId}})">
              <label>合理缺项</label>
              <div class="notice_item">
                <span class="notice_number">{{detailinfo.missinfItemCount}}</span>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </li>
            <li @click="$router.push({path:'/haveRegBreak',query:{id:$route.query.id}})">
              <label>已登记的违章</label>
              <div class="notice_item">
                <span class="notice_number">{{detailinfo.weizcount}}</span>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </li>
            <li @click="$router.push({path:'/rectificationNotice1',query:{recordId:$route.query.id, classifyId:detailinfo.classifyTwoId}})">
              <label>整改通知书</label>
              <div class="notice_item">
                <span class="notice_number">{{detailinfo.rectifycount}}</span>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </li>
            <li @click="$router.push({path:'/breakNotice',query:{recordId:$route.query.id,departId:detailinfo.beDepartId}})">
              <label>违章记分通知书</label>
              <div class="notice_item">
                <span class="notice_number">{{detailinfo.weizsendcount}}</span>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </li>
          </ul>
        </div>
          <div class="details">
            <div class="details_top">
              <p>量化考核详情</p>
              <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
            </div>
            <tree-classify :classify-list="detailinfo.divisionList[divisionIndex].classifyList" :keyList="detailinfo.divisionList[divisionIndex].recordItemList" :canAudit="detailinfo.divisionList[divisionIndex].canAudit"></tree-classify>
          </div>
          <div class="notice_div" v-if="$store.state.userid==detailinfo.checkGroupLeaderId&&isallstatus">
            <div class="notice_top">
                <p>项目全景照片</p>
                <span style="margin-left:30px;">当前共{{detailinfo.projectImgList!=null?detailinfo.projectImgList.length:0}}张照片</span>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
            </div>
          </div>
            <div v-if="$store.state.userid==detailinfo.checkGroupLeaderId&&isallstatus" class="form-item form-item-style2" style="overflow: hidden;padding-top:0;">
              <div>
                <div class="upload-wrap">
                  <div class="upload-item">
                        <upload 
                          :imgList="detailinfo.projectImgList"
                          @setFormData="setProjectFormData"
                          :type="'0'"
                          :recordId="detailinfo.id"
                        ></upload>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="$store.state.userid==detailinfo.checkGroupLeaderId&&isallstatus" class="notice_div">
              <div class="notice_top">
                  <p>项目管理亮点</p>
                  <span style="margin-left:30px;">当前共{{detailinfo.manageImgList!=null?detailinfo.manageImgList.length:0}}张照片</span>
                  <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </div>
            <div v-if="$store.state.userid==detailinfo.checkGroupLeaderId&&isallstatus" class="form-item form-item-style2" style="overflow: hidden;padding-top:0;">
              <div>
                <div class="upload-wrap">
                  <div class="upload-item">
                        <upload 
                          :imgList="detailinfo.manageImgList"
                          @setFormData="setManageFormData"
                          :type="'1'"
                          :recordId="detailinfo.id"
                        ></upload>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <!-- <img src="@/assets/imgs/add_pro_icon.png" class="add_btn" @click="$router.push({path: './registerBreak', query: { id: val}})"> -->
    <div class="add_btn" @click="$router.push({path: './registerBreak', query: { id: '',recordId:$route.query.id,departId:detailinfo.beDepartId}})"></div>
  </div>
</template>
<script>
import treeClassify from "@commonComponents/treeClassify";
import upload from "@/commonComponents/upload/uploadlc";
import { AlertModule } from "vux";
export default {
  data() {
    return {
      isallstatus:false,//分工成员是否全部提交
      isDisabled: true, // 是否禁止输入
      divisionIndex: 0,
      index: 0,
      detailData: {
        ResolveStartTime: "2019-07-01",
        ResolveEndTime: "2019-08-29",
        DeptName1: "考核单位名称",
        name: "曾乐",
        type: "2019考核表",
        exName: "考核表",
        time: "2019-07-23",
        leader: "刘敏"
      },
      standard: false,
      detailinfo: {
        questioncount: 0,
        weizcount: 0,
        weizsendcount: 0,
        createUser: "",
        createDate: "",
        operUser: "",
        operDate: "",
        checkDepartId: "",
        checkDepartName: "",
        charge: "",
        classifyOneId: "",
        classifyOneName: "",
        classifyTwoId: "",
        classifyTwoName: "",
        checkDate: "",
        checkGroupLeaderId: "",
        checkGroupLeaderName: "",
        receiverId: "string",
        receivrtName: "string",
        checkNo: "string",
        status: 0,
        approvalResult: "",
        approvalRemark: "",
        approver: "",
        approvalDate: "",
        rocordId: "",
        rocordNotPlan: 0,
        rocordStatus: 0,
        checkScore: 0,
        deleteTag: 0,
        deleteUser: "",
        deleteDate: "",
        beDepartId: "",
        beDepartName: "",
        divisionList: [
          {
            planId: "",
            divisionProsonId: "d",
            divisionProsonName: "d",
            standardIdList: "",
            standardNameList: "d",
            status: 0,
            editStatus: true,
            recordItemList: [{}],
            canAudit: true,
            id: ""
          },
          {
            planId: "",
            divisionProsonId: "",
            divisionProsonName: "f",
            standardIdList: "",
            standardNameList: "d",
            status: 0,
            editStatus: true,
            recordItemList: [{}],
            canAudit: true,
            id: ""
          }
        ],
        projectImgList: {},
        manageImgList: {},
        classList: {},
        totalDivision: 0,
        commitDivision: 0,
        canDelete: true,
        isCheck: true,
        isAudit: true,
        canUpdate: true,
        id: ""
      },
      detailData: [
        {
          id: "",
          quantizeName: "1-1",
          panrentId: "",
          tier: "",
          status: "",
          createUser: "",
          createDate: "",
          departID: "",
          claOrder: "",
          year: "",
          allPanrentId: "",
          children: [
            {
              id: "",
              quantizeName: "12-12",
              panrentId: ""
            }
          ]
        }
      ]
    };
  },
  components: {
    treeClassify,
    upload
  },
  created() {
    this.getInfo();
  },
  methods: {
    setProjectFormData (uploadLength, file) {
      // 获取验收图片上传后的id信息
      var ids = []
      for(var k of file){
          ids.push(k.id)
      }
      this.detailData.projectImgList = ids;
    },
    setManageFormData (uploadLength, file) {
      // 获取验收图片上传后的id信息
      var ids = []
      for(var k of file){
          ids.push(k.id)
      }
      this.detailData.manageImgList = ids;
    },
    getInfo() {
      let id = this.$route.query.id;
      let that = this;
      that.$axiosAjax.getRecordInfo({ id: id }).then(res => {
        if (res.data.success == true) {
          that.$nextTick(function() {
            that.detailinfo = res.data.result;
            if (that.detailinfo.divisionList && that.detailinfo.divisionList.length > 0) {
               that.detailinfo.divisionList.forEach(divItem => {
                if(divItem.status==1) {
                  that.isallstatus = true
                } else {
                  that.isallstatus = false
                }
              })
            }
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    checkRecord(status) {
      let that = this;
      if (that.valid(status)) {
        that.detailinfo.isCommit = status;
        that.$axiosAjax.checkRecord(that.detailinfo).then(res => {
          if (res.data.success) {
            that.$router.push({ path: "/executeAssess?status=1" });
          }
        });
      }
    },
    selectDivision(index) {
      this.divisionIndex = index;
    },
    valid(status) {
      let that = this;
      if(status==1){
        for (let division of that.detailinfo.divisionList) {
          if (division.canAudit) {
            for (let classify of division.recordItemList) {
              for (let item of classify.commonList) {
                if (item.actualScore == undefined && item.isMissingItem == 0) {
                  AlertModule.show({
                    content: "请输入" + item.keyRequire + "实际得分!"
                  });
                  return false;
                }
                if (
                  item.actualScore != item.shouldScore &&
                  !item.deductionReason
                ) {
                  AlertModule.show({
                    content: "请输入" + item.keyRequire + "扣分原因!"
                  });
                  return false;
                }
              }
            }
          }
        }
      }      
      return true;
    }
  }
};
</script>
<style lang="less" scoped>
.auditBtn {
  float: right;
  color: white;
  padding: 0 10px;
  border: 1px solid;
}
.form-item {
  .input_div {
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 17px;
    }
  }
}

.info_div3 {
  height: 55px;
  line-height: 45px;
  padding: 0 20px;
  border-top: 10px solid #ebeef2;
  p {
    float: left;
    color: #469b7a;
    font-size: 16px;
    font-weight: bold;
  }

  .vux-x-icon {
    fill: #999;
    float: right;
    margin-top: 12px;
  }
}

.member_div {
  .member_list {
    li {
      border-top: 5px solid #ebeef2;
    }

    .member1 {
      color: #ff0000;
    }

    .member2 {
      color: #15bd84;
    }
  }
}

.notice_div {
  border-top: 10px solid #ebeef2;
  padding-left: 20px;
  .notice_top {
    border-bottom: 1px solid #ebeef2;
    height: 45px;
    line-height: 44px;
    padding-right: 20px;
    p {
      float: left;
      color: #469b7a;
      font-size: 16px;
      font-weight: bold;
    }

    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 12px;
    }
  }

  .notice_list {
    li {
      justify-content: space-between;
      border-bottom: 1px solid #ebeef2;
      height: 55px;
      padding-right: 20px;
      label {
        display: block;
        float: left;
        height: 54px;
        line-height: 54px;
      }

      .notice_item {
        float: right;
        .notice_number {
          background: #469b7a;
          color: #fff;
          height: 16px;
          width: 16px;
          border-radius: 50%;
          display: inline-block;
          text-align: center;
          line-height: 16px;
          font-size: 12px;
          margin-top: 19px;
        }

        .vux-x-icon {
          fill: #999;
          float: right;
          margin-top: 16px;
        }
      }
    }

    li:last-child {
      border-bottom: none;
    }
  }
}

.details {
  border-top: 10px solid #ebeef2;
  .details_top {
    border-bottom: 1px solid #ebeef2;
    height: 45px;
    line-height: 44px;
    padding-right: 20px;
    margin-left: 20px;
    background: #fff;
    p {
      float: left;
      color: #469b7a;
      font-size: 16px;
      font-weight: bold;
    }

    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 12px;
    }
  }

  .details_list {
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 16px;
    }

    li {
      > div {
        height: 54px;
        line-height: 54px;
        padding-right: 20px;
      }
    }

    > li {
      justify-content: space-between;
      padding-left: 20px;
      border-bottom: 5px solid #ebeef2;
      > div {
        font-weight: bold;
        font-size: 16px;
      }

      .list_2 {
        li {
          border-top: 1px solid #ebeef2;
          > div {
            font-weight: bold;
            font-size: 14px;
          }
        }
      }

      .list_3 {
        li {
          font-size: 14px;
          text-indent: 2em;
          height: 55px;
          line-height: 54px;
          border-top: 1px solid #ebeef2;
          padding-right: 20px;
        }
      }
    }
  }
}

.btns_div {
  background: #ebeef2;
  padding: 30px 20px 55px;
  justify-content: space-between;
  display: flex;
  a {
    height: 40px;
    border-radius: 20px;
    display: inline-block;
    width: 140px;
    text-align: center;
    line-height: 40px;
    color: #fff;
  }

  .saveBtn {
    background: #469b7a;
  }

  .submitBtn {
    background: #15bd84;
  }
}

.add_btn {
  position: fixed;
  background: url('../../assets/imgs/add_pro_icon.png') no-repeat;
  background-size: 62px;
  height: 62px;
  width: 62px;
  right: 30px;
  bottom: 35px;
}
</style>
